<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性computed</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    1.计算属性：要显示的数据不存在，要通过已有的属性计算得来。
    2.计算属性fullName，其实底层用到的是对象的setter和getter。
    3.计算属性中get执行的时机：
        (1).初始读取时会执行一次，得到初始值去显示。
        (2).当依赖的数据发生改变时会被再次调用。
    4.优势：与methods实现相比，内部有缓存机制（复用），效率更高。
    5.备注：
        1.计算属性是用于直接读取使用的，不要去调用
        2.如果计算属性fullName以后要被修改，那么必须写set去响应修改，且set中要引起计算时依赖的数据发生改变

-->
<div id="root">
   姓: <input type="text" v-model="firstName">
   名: <input type="text" v-model="lastName">
    全名 <input type="text" v-model="fullName">
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    const vm=new Vue({
        el:"#root",
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                //get什么时候会被调用？1.有人读取fullName的时候; 2.依赖的数据发生变化时
                get(){
                    return this.firstName+"-"+this.lastName
                },
                //set什么时候会被调用？有人修改fullName的时候
                set(value){
                    /*console.log(value)*///修改的内容是什么 value就是什么
                    const arr=value.split("-")
                    // console.log(arr)
                    this.firstName=arr[0]
                    this.lastName=arr[1]
                }
            }

        }
    })
    console.log(vm)
</script>
</body>
</html>